import { defineConfig, presetAttributify, presetIcons, presetUno, presetWebFonts } from 'unocss'

export default defineConfig({
  shortcuts: [],
  presets: [
    presetUno(), // 预设unocss，添加上之后就可以无缝使用tailwind.css
    presetAttributify(), // 简化类名前缀 ，将 bg/text/font/p/border等分门别类，提升了阅读性和可维护性
    // presetIcons只对@iconify/json或者@iconify-json/[the-collection-you-want]依赖里面的图标起作用
    // 对于@iconify/vue依赖里面的无效
    // 虽然二者都是使用的https://icones.js.org/里面的iconify图标
    // 前者以类名或者像tailwindcss那样使用 <div class="tdesign-fullscreen-2" /> <div tdesign-fullscreen-2 />
    // 后者要结合<Icon icon="tdesign-fullscreen-2" />使用
    presetIcons({
      scale: 1.2,
      warn: true,
      prefix: '',
      extraProperties: { // 给所有图标设置统一的额外属性
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
      },
    }),
  ],
})
